// 评论页面
<template>
  <div class="comments-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.content"
        placeholder="搜索评论内容"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-select
        v-model="listQuery.state"
        placeholder="状态"
        clearable
        style="width: 120px"
        class="filter-item"
      >
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column prop="_id" label="ID" width="80" align="center" />
      <el-table-column prop="title" label="文章标题" min-width="200" />
      <el-table-column prop="Context" label="评论内容" min-width="300" />
      <el-table-column prop="name" label="评论者" width="120" align="center" />
      <el-table-column label="状态" width="120" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.state | statusFilter">
            {{ scope.row.state | statusTextFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="time"
        label="评论时间"
        width="160"
        align="center"
      />
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.state === 0"
            size="mini"
            type="success"
            @click="handleAudit(scope.row)"
          >
            审核
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total >= 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import axios from "axios";
export default {
  name: "CommentsManagement",
  components: { Pagination },
  filters: {
    statusFilter(state) {
      const statusMap = {
        0: "info",
        1: "success",
        2: "danger",
      };
      return statusMap[state];
    },
    statusTextFilter(state) {
      const statusTextMap = {
        0: "待审核",
        1: "已通过",
        2: "已拒绝",
      };
      return statusTextMap[state];
    },
  },
  data() {
    return {
      list: [], //所有评论数据
      SearchForPreviousList: [], //搜索数据
      filterlists: [], //筛选数据
      total: 0, //评论条数
      listQuery: {
        //评论每页条数和页数
        page: 1,
        limit: 10,
        content: "", //搜索的内容
        state: "", //默认查看待审核的评论
      },
      statusOptions: [
        { value: 0, label: "待审核" },
        { value: 1, label: "已通过" },
        { value: 2, label: "已拒绝" },
      ],
    };
  },
  mounted() {
    this.getList();
    // console.log();
  },
  watch: {
    "listQuery.state"() {
      this.filterList();
    },
  },
  methods: {
    // 获取数据功能
    getList() {
      // 获取评论列表数据
      axios
        .get("http://127.0.0.1:3000/api/FindComment")
        .then((response) => {
          const data = response.data.data;
          // 遍历data里面的time替换正则
          data.forEach((item) => {
            const str = item.time;
            const match = str.match(/^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2})/);
            if (match) {
              const result = `${match[1]} ${match[2]}`;
              item.time = result;
            }
          });
          // console.log(data.data.data);
          this.list = data;
          this.total = data.length;
          this.SearchForPreviousList = data;
          this.filterlists = data;
          this.filterList(); // 数据赋值后再筛选
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 搜索功能
    handleFilter() {
      this.listQuery.page = 1;
      // this.getList();
      this.list = this.SearchForPreviousList.filter((item) =>
        item.Context.includes(this.listQuery.content)
      );
    },
    // 是否通过审核处理
    handleAudit(data) {
      this.$confirm("确认通过该评论吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(data); //所点击的数据
          axios
            .post("http://127.0.0.1:3000/api/PassComment", { data })
            .then(() => {
              this.getList();
            })
            .catch((error) => {
              console.log(error);
            });
          this.$message({
            type: "success",
            message: "审核通过!",
          });
        })
        .catch(() => {
          // 不通过处理（取消则不通过）
          axios
            .post("http://127.0.0.1:3000/api/NoPassComment", { data })
            .then(() => {
              this.getList();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "错误!",
              });
            });
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    // 删除评论处理
    handleDelete(article) {
      this.$confirm("确认删除该评论吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        axios
          .delete(`http://127.0.0.1/api/DeleComment/${article._id}`)
          .then(() => {
            this.$message.success("删除成功");
            this.getList();
          })
          .catch(() => {
            this.$message.error("删除失败：");
          });
      });
    },
    // 筛选评论：
    filterList() {
      if (this.listQuery.state === "" || this.listQuery.state === undefined) {
        this.list = this.filterlists;
      } else {
        this.list = this.filterlists.filter(
          (item) => item.state === Number(this.listQuery.state)
        );
      }
    },
  },
};
</script>

<style scoped>
.comments-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.filter-container {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-item {
  transition: all 0.3s;
}

.filter-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-table {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.el-button--primary {
  background: linear-gradient(to right, #409eff, #64b5f6);
  border: none;
  transition: all 0.3s;
}

.el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.el-tag {
  border: none;
  font-weight: 500;
}

.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
